<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>极客学院布局</title>
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> -->
	<meta name="viewport" content="width=device-width" />
	<style>
		body {
			font-size: 12px;
			font-family: 'Microsoft yahei';
			padding: 0;
			margin: 0;
		}

		ul,p,h1,h2,h3,h4,h5,ol,div {
			padding: 0;
			margin: 0;
			list-style-type: none;
		}

		#nav {
			margin: 10px auto;
		}

		#nav ul {
			list-style-type: none;
			border-bottom: 2px solid #ccc;
			
		}

		#nav ul li {
			/*display: inline-block;*/
			float: left;
			/*background: #efefef;*/
			cursor: pointer;
			height: 30px;
			line-height: 30px;
			width: 16.6%;
			margin: 0;
			/*margin-right:4px;*/
			text-align: center;
			margin-bottom: -2px;
			padding-bottom: 5px;
			position: relative;
		}

		#nav ul li.on:after {
			content: '';
			position: absolute;
			top: 24px;
			width: 0px;
			height: 0px;
			border: 6px solid transparent;
			border-bottom: 6px solid #0077fa;
			left: 50%;
			margin-left: -6px;
		}

		#nav ul li.on {
			border-bottom: 2px solid #0077fa;
		}

		#nav ul li:first-child {
			margin-left: 3px;
		}

		#nav ul:after {
			display: block;
			content: '';
			clear: both;
		}

		#list {
			margin: 10px auto;
		}

		#list ul {
			width: 100%;
		}

		
		#list ul:after {
			content: '';
			display: block;
			clear: both;
			overflow: hidden;
			height: 0;
			visibility: hidden;
		}

		#list ul li {
			float: left;
			width: 235px;
			min-height: 200px;
			margin-right: 20px;
			margin-bottom: 20px;
			box-sizing: border-box;
			border: 1px solid #333;
			position: relative;
		}

		#list ul li.on {
			z-index: 10;
			margin-bottom: -80px;
			position: relative;
			background: #fff;
			/*top: 20px;
			left: 20px;*/
		}

		#list ul li:hover {
			/*z-index: 10;*/
			margin-bottom: -80px;
			
			background: #fff;
			/*top: 20px;
			left: 20px;*/
		}

		#list ul li:hover .info {
			display: block;
		}

		#list ul li p.img{
			width: 100%;
			height: 100px;
			background: #eee;
		}

		#list ul li .info {
			height: 140px;

			/*margin-top: 10px;*/
			display: none;
		}



		@media screen and (max-width: 1000px) and (min-width: 600px){
			#nav,#list {
				width: 800px;
				background: red;
			}
		}

		@media screen and (min-width: 1001px) {
			#nav,#list,#list ul {
				width: 1000px;
				/*background: #111;*/
			}

			#list ul {
				width: 1100px;
			}
		}
	</style>
	<script>
		(function(win){
			window.onload = function() {
				var navObj = document.getElementById("nav");
				var lis = navObj.getElementsByTagName("li");
				for(var i = 0; i < lis.length; i++ ){
					(function(index){
						lis[index].onmouseover = function() {

							for(var j = 0; j < lis.length; j++ ){
								if(lis[j] !== lis[index]){
									lis[j].className = lis[j].className.replace("on","");
								}
							}

							var cs = this.className;
							cs += " on";
							this.className = cs;
						}
					})(i);
				}
			}
		})(window);

		function Person(name,age) {
			this.name = name;
			this.age = age;
		}

		Person.prototype.say = function() {
			console.log(typeof(this) + " name=" + this.name + ";age=" + this.age);
		}

		var Author = function(name,age) {
			Person.apply(this,arguments);
		};
		Author.prototype = new Person();
		Author.prototype.constructor = Author;
		var a = new Author("zhansan",10);
		a.say()
	</script>

</head>
<body>
	<div id="nav">
		<ul>
			<li class="on">热门推荐</li>
			<li>最新课程</li>
			<li>免费课程</li>
			<li>项目实战</li>
			<li>全球首发</li>
			<li>企事合作</li>
		</ul>
	</div>
	<div id="list">
		<ul>
			<li class="">
				<p class="img"></p>
				<div class="info">这里是很长的内容<br/>可以换行的内容<br/>当前不可以看到</div>
				<h2>这是标题</h2>
			</li>
			<li>
				<p class="img"></p>
				<div class="info">这里是很长的内容<br/>可以换行的内容<br/>当前不可以看到</div>
				<h2>这是标题</h2>
			</li>
			<li>
				<p class="img"></p>
				<div class="info">这里是很长的内容<br/>可以换行的内容<br/>当前不可以看到</div>
				<h2>这是标题</h2>
			</li>
			<li class="on">
				<p class="img"></p>
				<div class="info">这里是很长的内容<br/>可以换行的内容<br/>当前不可以看到</div>
				<h2>4这是标题</h2>
			</li>
			<li>
				<p class="img"></p>
				<div class="info">这里是很长的内容<br/>可以换行的内容<br/>当前不可以看到</div>
				<h2>这是标题</h2>
			</li>
			<li>
				<p class="img"></p>
				<div class="info">这里是很长的内容<br/>可以换行的内容<br/>当前不可以看到</div>
				<h2>这是标题</h2>
			</li>
			<li>
				<p class="img"></p>
				<div class="info">这里是很长的内容<br/>可以换行的内容<br/>当前不可以看到</div>
				<h2>这是标题</h2>
			</li>
			<li>
				<p class="img"></p>
				<div class="info">这里是很长的内容<br/>可以换行的内容<br/>当前不可以看到</div>
				<h2>这是标题</h2>
			</li>
		</ul>
	</div>
</body>
</html>